<template>
	<scroll-view class="album_scorll_view" scroll-y @scrolltolower="handleToLower">
		<view class="album_swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
				<swiper-item v-for="item in banner" :key="item.id">
					<image :src="item.thumb"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="album_list">
			<navigator class="album_item" v-for="item in album" :key="item.id" :url='`/pages/album/index?id=${item.id}`'>
				<view class="album_img">
					<image :src="item.cover" mode="aspectFill"></image>
				</view>
				<view class="album_info">
					<view class="album_name">{{item.name}}</view>
					<view class="album_desc textover">{{item.desc}}</view>
					<view class="album_btn">
						<view class="album_attention">
							关注
						</view>
					</view>
				</view>
			</navigator>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		mounted() {
			this.getList()
		},
		data(){
			return {
				params:{
					limit: 30,
					order: 'new',
					skip: 0
				},
				banner: [],
				album: [],
				haMore: true
			}
		},
		methods:{
			getList(){
				this.request({
					url: 'http://157.122.54.189:9088/image/v1/wallpaper/album',
					data:this.params
				}).then(resuit=>{
					if(this.banner.length === 0){
						this.banner = resuit.res.banner;
					}
					if(resuit.res.album.length === 0){
						this.haMore = false;
						return;
					}
					this.album = [...this.album,...resuit.res.album]
				})
			},
			handleToLower(){
				console.log('武汉加油')
				if(this.haMore){
					this.params.skip += this.params.limit;
					this.getList();
				}else {
					uni.showToast({
						title:"没有更多数据",
						icon:"none"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.album_scorll_view {
		height: calc(100vh - 36px);
	}
	
	.album_swiper{
		swiper{
			height: calc(750rpx / 2.3);
			image {
				height: 100%;
			}
		}
	}
	
	.album_list{
		padding: 10rpx;
		.album_item{
			padding: 10rpx 0;
			display: flex;
			border-bottom: 1rpx solid #ccc;
			.album_img{
				flex: 1;
				padding: 10rpx;
				image{
					width: 230rpx;
					height: 200rpx;
				}
			}
			.album_info{
				flex: 2;
				padding: 0 10rpx;
				overflow: hidden;
				.album_name{
					font-size: 30rpx;
					padding: 10rpx 0;
				}
				.album_desc{
					padding: 10rpx 0;
					font-size: 24rpx;
				}
				.album_btn{
					padding: 10rpx;
					display: flex;
					justify-content: flex-end;
					.album_attention{
						color: #d52a7e;
						border: 1rpx solid #d52a7e;
						padding: 10rpx;
					}
				}
			}
		}
	}
</style>
